<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/wxrem.js" type="text/javascript" charset="utf-8"></script>
        <!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->
        <style type="text/css">
        	.follow-code-top{
				position: relative;
				width: 100%;
				background: #303133;
				padding:0.8rem  2rem;
				z-index: 100;
				overflow: hidden;
				display: none;
			}
			.follow-code-logo{
				float: left;
				width: 4rem;
				z-index: 1000;
			}
			.follow-code-btn,.open-code-btn {
				position: absolute;
				line-height: 3.5rem;
				padding: 0 1rem;
				height: 3.5rem;
				top:1.2rem;
				right:2rem;
				text-align: center;
				color: #333333;
				background: #fbd454;
				border-radius: 2px;
			}
			.follow-code-container .follow-mask{
				position: fixed;
				top:0;
				left:0;
				bottom:0;
				right: 0;
				background:rgba(0,0,0,.3);
				z-index: 100;
			}
			.follow-code-container .follow-dialog{
				position: fixed;
				top:50%;
				left:50%;
				margin-left:-125px;
				margin-top:-140px;
				width:250px;
				height:280px;
				border-radius: 6px;
				background: #FFf;
				z-index: 101;
				text-align: center;
				padding:30px 0 25px 0;
			}
			.follow-code-container .follow-close{
				background: url(img/close1.png) no-repeat center center;
				background-size: 100% 100%;
				position: absolute;
				right:12px;
				top:12px;
				height:18px;
				width:18px;
			}
			.hide{
				display: none;
			}
        </style>
	</head>
	<body style="background: white;">
		<div class="follow-code-top">
			<img src="img/logo.png" class="share-user-img follow-code-logo" alt="" />
			<span style="margin-left:10px;line-height: 40px; color: white;" class="no-share-text">解读全球经典好书</span>
			<div class="follow-code-btn hide" style="text-align: right;">
				关注公众号
			</div>
			<div class="open-code-btn hide" style="text-align: right;">
				打开公众号
			</div>
		</div>
		<div class="follow-code-container" style="display: none;">
			<div class="follow-mask"></div>
			<div class="follow-dialog" >
				<div class="follow-close">
				</div>
				<div class="follow-title" style="font-size: 16px;font-weight: bold;margin-bottom: 10px;">
					蜜读
				</div>
				<div>
					关注公众号，查看更多好书
				</div>
				<img src="img/wechatCode.png" alt="" style="width: 100px;display: inline-block;margin: 25px 0 15px 0;"/>
				<div style="color:#999">
					长按识别二维码关注
				</div>
			</div>
		</div>
		<div id="list_html">
		</div>
		<!--回到首页-->
		<img class="backToHome hide" src="img/backToHome.png" style="width: 6.3rem; height: 4.9rem; bottom: 8.2rem; right: 0; position: fixed; z-index: 1000;"/>
	</body>	
     <script id="list_template" type="text/html">
     	<div style="min-height: 21rem;background-color: white;">
    	    	    <div style="background: #b9af9f; width: 100%;height: 15rem;" >
    	    	    	<div class="col-xs-12" style="min-height: 9.5rem;height:auto;width:100%;padding:5.5rem 1.5rem 0 1.5rem;">
		    <div class="col-xs-4" style="height:9.17rem;width: 29.3333%;padding:0rem;>
		        <a href="javascript:;" style="display:block;height: 100%;">
		            <img src="{{data.img | addUrl}}" style="box-shadow:0.1rem 0.1rem 1rem #e6e6e6;width: 9.17rem;height: 9.17rem;margin: 0;border: 0;vertical-align: middle;border-radius: 3%/5%;">
		        </a>
		    </div>
		    <div class="col-xs-8" style="position: relative;height:9.17rem;width:68.666666%;top:0rem;left:1rem;padding: 0.2rem 0.6rem 0.5rem 0rem;">
                <span class="aui-ellipsis-2 " style="position: relative;left:0rem;margin-top: 1.2rem;font-size: 1.66rem;line-height:1.7rem;font-weight: bold;line-height: 2.0rem;">{{data.title}}</span>
                <div style="position:absolute;bottom: 1.2rem;">
                	<span style="float:left;color: #666;font-size: 1.3rem;line-height: 1.3rem;margin-top: .5rem;border-right:1px solid #999999;padding-right: .46rem;">{{data.bookCount}}本书</span>
                	<span style="float:left;color: #666;font-size: 1.3rem;line-height: 1.3rem;margin-top: .5rem;padding-left: .46rem;">{{data.clickCount | totalReadCount}}人在听</span>
                </div>
            </div>
		</div>
    	    	    </div>
    	    	    <p style="margin: 2.0rem 1.5rem; font-size: 1.5rem; color: #666666;">{{data.contentabstract}}</p>
		</div>
		 {{each data.bookList}}
		    <div class="col-xs-12 bookdetail" style="min-height:12rem;height:auto;width:100%;padding-left: 1.456rem;padding-right: 1.456rem;" data-bookid={{$value.bookid}} data-bookname={{$value.bookname}} data-bookimg={{$value.bookimg}} data-bookrecommend={{$value.bookrecommend}}>
				<div class="col-xs-4" style="height:12rem;width: 29.3333%;padding:0rem;">
					<a href="javascript:;" style="text-decoration: none;">
						<img src="{{$value.bookimg | addUrl}}" style="width: 9.17rem;height: 12rem;box-shadow: 3px 3px 3px #e6e6e6;">
						<img src="icon/listen.png" style="width: 1.66rem; height: 1.66rem; margin-top: -1.82rem; margin-left: 7.28rem;"/>
					</a>
				</div>
				<div class="col-xs-8" style="position: relative;height:12rem;width:68.666666%;top:0rem;left:0.52rem;padding: 0.2rem 0.572rem 0.5rem 0rem;">
					<span class="aui-ellipsis-2 " style="position: relative;left:0rem;margin: 0;font-size: 1.66rem;line-height:2rem;font-weight: bold;">{{$value.bookname}}</span>
					<p class="aui-ellipsis-2" style="position: relative;font-size:1.4rem;color: #666;margin-top: 0.78rem;margin-bottom: 0;">{{$value.bookrecommend}}</p>
					{{if progessArr[$index] == 0}}
					<div style="position:absolute;bottom: 0.1rem;">
						<span style="float:left;color: #999;font-size: 1.2rem;line-height: 1.3rem;margin-top: .5rem;padding-right: .46rem;">{{$value.videoduration}}</span>
					</div>
					{{else}}
					<div style="position:absolute;bottom: 0.1rem;">
						<span style="float:left;color: #999;font-size: 1.2rem;line-height: 1.3rem;margin-top: .5rem;padding-right: .46rem;">{{$value.videoduration + " " + progessArr[$index]}}</span>
					</div>
					{{/if}}
					{{if (userVip.type==1||$value.isorder==1)}}
					<div class="begin-read"  data-isorder={{$value.isorder}} data-bookid={{$value.bookid}} style="position: absolute;right: 1.4rem;bottom: 0;width: 7.8rem;height:3rem;background-image: linear-gradient(-179deg, #F7BA64 0%, #fbd454 100%);box-shadow: 0 2px 5px 0 #F8CAA7;border-radius: 10rem;text-align: center;color: #333333;font-size: 1.4rem; padding-top: 0.3rem;line-height: 2.95rem; font-weight: bold;">
						开始听书
					</div>
					{{else}}
					<div style="position: absolute;right: 0.5rem;bottom: 0.2rem;width: 7.8rem;height:1.5rem;font-size: 1.4rem; text-align: center;color: #ED8434;font-weight: bold;">
						{{"¥ " + $value.bookprice}}
					</div>
					{{/if}}
				</div>
			</div>
			<div class="col-xs-12" style="height: 2rem;width: 100%;"></div>
			{{if (userVip.type != 1 && $index == data.bookList.length - 1)}}
			<div class="col-xs-12" style="height: 5rem;width: 100%;"></div>
			{{/if}}
		 {{/each}}
		 {{if  userVip.type != 1}}
		<div id="footer" style="width: 100%; height: 4.5rem;overflow: hidden;position: fixed;bottom: 0;left: 0; z-index: 100;">
			<div id="buy" class="col-xs-7" style="width: 100%; background: #fbd454;border-top: 1px solid #fbd454;text-align: center;line-height:4.5rem;font-size:16px;color: #333333;font-weight: bold;">
				{{if userVip.type==-1}}
					VIP已到期，去续费
				{{else}}
				    加入VIP，免费听书
				{{/if}}
			</div>
		</div>
		{{/if}}
    </script>
		<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/purl.js"></script>
        <script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
		   document.writeln("<script type=\"text/javascript\" src=\"js/common.js?"+ Math.random() + "\"></scr"+"ipt>");
        </script>
        <script type="text/javascript">
        	    var themeId = GetQueryString('themeId');
        	    var openId2 = GetQueryString('openId2');
        	    
        	    $('.backToHome').click(function(){
	 	       location.href = "index.html?merchantId="+merchantId
            })
                if(GetQueryString('home')){
                    $('.backToHome').removeClass('hide')
                }
	        //设置导入模板变变量
	        var imgHosturl = "http://img.readerday.com/cover/";
	        template.defaults.imports.addUrl = function(value){
		       if(value==""){
			       return "img/book.png"
		       }else{
			       return imgHosturl+value
		       }
	       };
	       template.defaults.imports.totalReadCount = function(value){
		    value = value.toString();
		    if(value.length<=4){
			    return value;
		    }else{
			   value = value/10000;
			   return value = value.toFixed(1)+"万"
		    }
	      };

	      
	       function getThemeDetail() {
               var sign = hex_md5(objKeySort({token:token,timestamp:date,themeid:themeId,merchantId:merchantId}))
               $.ajax({
	       	  	type:"get",
	       	  	url:hostUrl + "product/theme/detail/"+ token +"/"+ sign +"/"+ date + "/" + themeId + '/' + merchantId,
	       	  	async:true,
	       	  	success:function(data) {
	       	  		if (data.status != 0) {
	       	  			return;
	       	  		}
					shareWx(data.data.title, data.data.img, data.data.contentabstract);
	       	  		data.userVip = userVip;
                    if (window.localStorage) {
                        var progess;
                        var bookid;
                        var bookCount;
                        var progessStr;
                        var progessArr = new Array();
                        for (var i = 0; i < data.data.bookList.length; i ++) {
                            bookid = data.data.bookList[i]["bookid"];
                            bookCount = localStorage.getItem(bookid + "_count");
                            bookCount = parseInt(bookCount);
                            progess = 0;
                            if (bookCount) {
                                for (var j = 0; j < bookCount; j ++) {
                                    var value = localStorage.getItem(bookid + "_" + j);
                                    if (value) {
                                        var timeArr = value.split("_");
                                        if (timeArr.length == 2) {
                                            currentTime = parseInt(timeArr[0]);
                                            duration = parseInt(timeArr[1]);
                                            progess += parseInt((currentTime * 100) / duration);
                                        }
                                    }
                                    if (j == bookCount - 1) {
                                        if (progess == 0 || !progess) {
                                            progessStr = "0";
                                        }else {
                                            if (parseInt(progess / bookCount) >= 100) {
                                                progessStr = "已听完";
                                            } else{
                                                progessStr = "已听" + parseInt(progess / bookCount) + "%";
                                            }
                                        }
                                    }
                                }
                            } else{
                                progessStr = "0";
                            }
                            progessArr.push(progessStr);
                        }
                    }
                    data.progessArr = progessArr;
					var list_html = template("list_template",data);
					document.getElementById('list_html').innerHTML = list_html;
	       	  	}
	       	  });

	       }
	       getToken(getThemeDetail);
	       
	       $("#list_html").on('click', '.bookdetail', function() {
			window.location.href = "bookDetail.html?bookid=" + $(this).attr('data-bookid') + "&videoauthorid=" + $(this).attr('data-videoauthorid') + "&copywriter=" + $(this).attr('data-copywriter');
		})
		
		$("#list_html").on('click', '.buy', function(e) {
			e.stopPropagation()
			var parent = $(this).parents('.bookdetail')
			location.href = "chapter.html?bookid=" + parent.attr('data-bookid') + "&videoauthorid=" + parent.attr('data-videoauthorid') + "&copywriter=" + parent.attr('data-copywriter') + "&bookname="+parent.attr('data-bookname')+"&bookimg=" + parent.attr('data-bookimg');
		})
		
		$("#list_html").on('click', '#buy', function() {
			var url="memberPage.html?shareBack=1"
			location.href=url;
		});
		$("#main").on('click', '.begin-read', function(e) {
			e.stopPropagation();
			var parent=$(this).parents('.list_template')
			window.location.href = "chapter.html?bookid=" + $(this).attr('data-bookid') + "&videoauthorid=" +$(this).parents('.bookdetail').attr('data-videoauthorid') + "&copywriter=" + $(this).parents('.bookdetail').attr('data-copywriter')+"&bookname="+parent.attr('data-bookname')+"&bookimg=" + parent.attr('data-bookimg');
		})
        </script>
</html>